<template>
	<view class="pit-avoidance-page">
		<!-- 1. 顶部非固定区域 -->
		<view class="non-sticky-header" :style="topBarStyle">
			<image class="header-bg-image" src="/static/pit-avoidance/bg_top.png" mode="widthFix"></image>
			<view class="header-content-overlay">
				<view class="location-bar">
					<view class="city-selector" @click="navigateToCitySelect">
						<!-- content -->
					</view>
					<view class="search-icon-initial" @click="navigateToSearch">
						<u-icon name="search" color="#000" size="24"></u-icon>
					</view>
				</view>
				<image class="title-image" src="/static/pit-avoidance/title_kengyankengyu.png" mode="widthFix"></image>
		
				<!-- 3D卡片轮播 -->
				<swiper class="pit-swiper" circular :current="swiperCurrent" @change="e => swiperCurrent = e.detail.current" previous-margin="210rpx" next-margin="210rpx">
					<swiper-item v-for="(item, index) in topSwiperList" :key="item.id">
						<view class="swiper-item-wrapper" :class="{ 'is-active': index === swiperCurrent }">
							<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
							<view class="swiper-title-overlay">{{ item.title }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 2. 主内容区域 (将原有的scroll-view替换为page的自然滚动) -->
		<view class="main-content-section">
			<!-- 关键优化：这个容器将实现粘性定位 -->
			<view class="sticky-content-header" :style="{ top: navBarTotalHeight + 'px' }">
				<!-- 筛选栏 -->
				<view class="filter-bar">
					<view class="city-selector" @click="navigateToCitySelect">
						<text>淮安市</text>
						<u-icon name="/static/pit-avoidance/icon_down.png" color="#000" size="14"></u-icon>
					</view>
					<view class="right-filters">
						<view class="filter-item">
							<text>位置距离</text>
							<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
						</view>
						<view class="filter-item priority">
							<text>避坑指数优先</text>
							<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 一级分类按钮 -->
				<view class="main-category-tabs">
					<view
						v-for="(tab, index) in subTabList"
						:key="index"
						class="main-tab-item"
						:class="{ 'active': currentSubTab === index }"
						@click="handleSubTabChange(index)"
					>
						<image :src="tab.icon" class="tab-icon" mode="aspectFit"></image>
						<text>{{ tab.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 内容展示区域 -->
			<view v-if="currentSubTab === 1" class="content-display-area">
				<view class="swiper-container">
					<u-swiper
						:list="bannerSwiperList"
						keyName="image"
						indicator indicatorMode="dot" indicatorActiveColor="#FBD13E"
						indicatorInactiveColor="rgba(255, 255, 255, 0.5)"
						:indicatorStyle="{ bottom: '20rpx',  right: '60rpx' }"
						height="100" radius="10" imgMode="aspectFill" circular
						@click="handleBannerSwiperClick"
					></u-swiper>
				</view>
				
				<view class="spot-list">
					<view class="spot-item" v-for="(item, index) in spotList" :key="index" @click="navigateToDetail(item)">
						<image class="item-bg" src="/static/item_bg.png"></image>
						<view class="item-content">
							<image class="spot-image" :src="item.image" mode="aspectFill"></image>
							<view class="spot-details">
								<text class="spot-name">{{ item.name }}</text>
								<view class="rating-line">
									<view class="rating-line-left">
										<text class="rating-label">避坑指数</text>
										<u-rate :count="5" v-model="item.rating" :allowHalf="true" activeColor="#F66B2F" readonly size="16"></u-rate>
										<text class="score">{{ item.rating.toFixed(1) }}</text>
									</view>
									<text class="rating-reviews">{{ item.reviews }}条</text>
								</view>
								<view class="tags-line">
									<view>
										<text class="tag-item">{{ item.category }}</text>
										<text class="tag-item">{{ item.district }}</text>
									</view>
									<text class="distance">{{ item.distance }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="placeholder-content">
				<text> {{subTabList[currentSubTab].name}} 分类内容待开发...</text>
			</view>
		</view>

		<Tabbar :tabbar-index="1" />
		<PublishPopup :show="showPublishPopup" @close="showPublishPopup = false" />
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar/tabbar.vue";
	import PublishPopup from '@/components/PublishPopup/PublishPopup.vue';
export default {
	data() {
		return {
			showPublishPopup: false,
			// 优化：navBarTotalHeight 用于 position:sticky 的 top 值
			navBarTotalHeight: 0,
			currentSubTab: 1,
			subTabList: [
				{ name: '美食', icon: '/static/pit-avoidance/icon_food.png' },
				{ name: '景点', icon: '/static/pit-avoidance/icon_jd.png' },
				{ name: '交通', icon: '/static/pit-avoidance/icon_jt.png' },
				{ name: '酒店', icon: '/static/pit-avoidance/icon_hotel.png' },
				{ name: '体验', icon: '/static/pit-avoidance/icon_rw.png' }
			],
			swiperCurrent: 1,
			topSwiperList: [],
			bannerSwiperList: [],
			spotList: []
		};
	},
	components: {
		Tabbar,
		PublishPopup,
	},
	computed: {
		topBarStyle() {
			// #ifdef APP-PLUS || H5
			this.navBarTotalHeight = this.$store.state.systemInfo.statusBarHeight;
			return `padding-top: ${this.$store.state.systemInfo.statusBarHeight}px;`;
			// #endif
			
			// #ifdef MP-WEIXIN
			this.navBarTotalHeight = this.$store.state.systemInfo.navBarTotalHeight;
			if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
				const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo.capsuleRightPadding * 2;
				const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo.capsuleRightPadding;
				return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
			}
			// #endif
			return '';
		}
	},
	onLoad() {
		uni.$on('togglePublishPopup', this.handleTogglePublishPopup);
		this.loadInitialData();
	},
	onUnload() {
		uni.$off('togglePublishPopup', this.handleTogglePublishPopup);
	},
	onHide() {
		this.showPublishPopup = false;
	},
	onBackPress(options){
		if (options.from === 'backbutton' && this.showPublishPopup) {
			this.showPublishPopup = false;
			return true; 
		}
		return false;
	},
	methods: {
		handleTogglePublishPopup() {
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			if (currentPage.route === 'pages/tabBar/pit-avoidance/pit-avoidance') {
				this.showPublishPopup = !this.showPublishPopup;
			}
		},
		loadInitialData() {
			this.topSwiperList = [
				{ id: 'swp1', image: '/static/pit-avoidance/swp1.png', title: '里运河文化长廊' },
				{ id: 'swp2', image: '/static/pit-avoidance/swp2.png', title: '说实话, 河下千年古镇也就那样~' },
				{ id: 'swp3', image: '/static/pit-avoidance/swp3.png', title: '文庙古街道' }
			];
			this.bannerSwiperList = [
				{ image: '/static/pit-avoidance/banner_aquarium.png', title: '本地熊榜单-淮安站' },
				{ image: '/static/pit-avoidance/banner_aquarium.png', title: '探索更多精彩' }
			];
			this.spotList = [
				{ id: 1, name: '淮安市河下古镇', image: '/static/pit-avoidance/spot_hexia.png', rating: 4.5, reviews: 8412, category: '5A级景点/古镇', district: '淮安区', distance: '5.3km' },
				{ id: 2, name: '淮安市西游乐园', image: '/static/pit-avoidance/spot_xiyou.png', rating: 4.0, reviews: 5615, category: '主题乐园', district: '清江浦区', distance: '6.8km' },
				{ id: 3, name: '淮安市动物园', image: '/static/pit-avoidance/spot_zoo.png', rating: 3.5, reviews: 3691, category: '动物园', district: '清江浦区', distance: '9.8km' },
				{ id: 4, name: '总督漕运部院遗址公园', image: '/static/pit-avoidance/spot_caoyun.png', rating: 3.0, reviews: 1527, category: '纪念公园', district: '淮安区', distance: '13.5km' },
				{ id: 5, name: '古黄河湿地公园', image: '/static/pit-avoidance/spot_guhuanghe.png', rating: 3.6, reviews: 1527, category: '湿地公园', district: '清江浦区', distance: '4.5km' },
				{ id: 6, name: '淮安市河下古镇', image: '/static/pit-avoidance/spot_hexia.png', rating: 4.5, reviews: 8412, category: '5A级景点/古镇', district: '淮安区', distance: '5.3km' },
				{ id: 7, name: '淮安市西游乐园', image: '/static/pit-avoidance/spot_xiyou.png', rating: 4.0, reviews: 5615, category: '主题乐园', district: '清江浦区', distance: '6.8km' },
				{ id: 8, name: '淮安市动物园', image: '/static/pit-avoidance/spot_zoo.png', rating: 3.5, reviews: 3691, category: '动物园', district: '清江浦区', distance: '9.8km' },
				{ id: 9, name: '总督漕运部院遗址公园', image: '/static/pit-avoidance/spot_caoyun.png', rating: 3.0, reviews: 1527, category: '纪念公园', district: '淮安区', distance: '13.5km' },
				{ id: 10, name: '古黄河湿地公园', image: '/static/pit-avoidance/spot_guhuanghe.png', rating: 3.6, reviews: 1527, category: '湿地公园', district: '清江浦区', distance: '4.5km' }
			];
		},
		handleSubTabChange(index) {
			if (this.currentSubTab === index) return;
			this.currentSubTab = index;
		},
		handleBannerSwiperClick(index) {
			uni.showToast({ title: this.bannerSwiperList[index].title, icon: 'none' });
		},
		navigateToDetail(item) {
			uni.navigateTo({
				url: `/pages_sub/pit-avoidance/attraction-detail/attraction-detail?item=${encodeURIComponent(JSON.stringify(item))}`
			});
		},
		navigateToCitySelect() { uni.navigateTo({ url: '/pages_sub/common/city/city-select' }); },
		navigateToSearch() { uni.navigateTo({ url: '/pages_sub/common/search-suggestions/search-suggestions' }); },
	}
};
</script>

<style lang="scss" scoped>
/* 页面基础 */
.pit-avoidance-page { 
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #F8F8F8; 
}

/* 顶部非固定区域 */
.non-sticky-header {
	position: relative; 
	z-index: 2;
	.header-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
	.header-content-overlay { position: relative; z-index: 2; padding: 30rpx 0; padding-top: var(--status-bar-height); }
	.title-image { width: 80%; margin: -30rpx 0 40rpx 10%; height: 100rpx; display: block; }
	.location-bar { 
		display: flex; justify-content: space-between; align-items: center; 
		padding: 0 30rpx;
	}
}

/* 3D卡片轮播 */
.pit-swiper {
	height: 190rpx; margin-top: 10rpx;
	.swiper-item-wrapper {
		height: 100%; transition: transform 0.3s, opacity 0.3s;
		transform: scale(0.85); opacity: 0.8;
		position: relative; border-radius: 12rpx; overflow: hidden;
		&.is-active { transform: scale(1); opacity: 1; }
		.swiper-image { width: 100%; height: 100%; }
		.swiper-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10rpx 12rpx; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: #fff; font-size: 24rpx; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	}
}

/* 主内容区域 */
.main-content-section {
	flex: 1; 
	background-color: #fff; border-radius: 40rpx 40rpx 0 0;
	padding: 0 30rpx;
	position: relative; z-index: 2;

	/* 关键优化点：为底部Tabbar留出空间 */
	padding-bottom: calc(102rpx + 20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(102rpx + 20rpx + env(safe-area-inset-bottom));
}

/* 粘性定位容器 */
.sticky-content-header {
	position: sticky;
	z-index: 99;
	background-color: #fff;
	padding-top: 20rpx;
	margin: 0 -30rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	// top值现在通过 :style 动态绑定
}

/* 筛选栏 */
.filter-bar {
	display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rpx;
	.city-selector { display: flex; align-items: center; font-size: 32rpx; font-weight: bold; text { margin-right: 8rpx; } }
	.right-filters {
		display: flex; align-items: center; gap: 20rpx;
		.filter-item {
			display: flex; align-items: center; font-size: 26rpx; color: #000;
			&.priority { color: #DD524D; }
			text { margin-right: 4rpx; }
			.u-icon{ padding-top: 8rpx; }
		}
	}
}

/* 一级分类按钮 */
.main-category-tabs {
	display: flex; justify-content: space-around; padding-bottom: 20rpx;
	.main-tab-item {
		display: flex; flex-direction: row; align-items: center; justify-content: center;
		padding: 6rpx 16rpx; border-radius: 36rpx; background-color: #F5F5F5;
		transition: all 0.2s;
		.tab-icon { width: 38rpx; height: 38rpx; margin-right: 6rpx; }
		text { font-size: 28rpx; color: #333; }
		&.active { background-color: #5C2D04; text { color: #fff; font-weight: bold; } }
	}
}


/* 内容展示区 */
.content-display-area {
	padding-top: 20rpx;
	.swiper-container { margin-bottom: 30rpx; }
}
.placeholder-content { padding: 100rpx 0; text-align: center; color: #999; }

/* 景点列表 */
.spot-list {
	display: flex; flex-direction: column; gap: 30rpx;
	.spot-item {
		position: relative; width: 100%; height: 170rpx; border-radius: 16rpx; overflow: hidden;
		background-image: url('/static/pit-avoidance/item_bg.png'); background-size: 100% 100%;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); 
		.item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
		.item-content {
			position: relative; z-index: 2; display: flex; align-items: center;
			height: 100%; box-sizing: border-box;
			.spot-image { width: 210rpx; height: 100%; border-radius: 20rpx; flex-shrink: 0; }
			.spot-details {
				display: flex; flex-direction: column; justify-content: space-around;
				flex: 1; height: 100%; margin-left: 30rpx; color: #333; margin-right: 20rpx;
				.spot-name { font-size: 32rpx; font-weight: bold; }
				.rating-line {
					display: flex; align-items: center; justify-content: space-between;
					.rating-line-left { display: flex; align-items: center; }
					.rating-label { font-size: 24rpx; color: #666; margin-right: 10rpx; }
					.rating-score { font-size: 28rpx; font-weight: bold; color: #F66B2F; margin: 0 10rpx; }
					.rating-reviews { font-size: 24rpx; color: #666; }
				}
				.tags-line {
					display: flex; align-items: center; justify-content: space-between;
					.tag-item { color: #666; font-size: 22rpx; margin-right: 20rpx; border-radius: 6rpx; }
				}
				.distance { font-size: 24rpx; color: #000; align-self: flex-end; }
			}
		}
	}
}
</style>